<template>
  <Modal
    width="800"
    class="modal-tips"
    v-model="config"
    @on-cancel="cancel"
    :mask-closable="false"
    footer-hide
    title="确认域名"
  >
    <user-tab-list
      :list="tablist"
      :normal="true"
      @click-tab="clickTab"
    ></user-tab-list>
    <div style="position: relative; padding-bottom: 30px">
      <Spin :withIcon="true" v-if="loading"></Spin>
      <div class="main-area" ref="scrollArea">
        <table class="table-area">
          <thead>
            <tr>
              <th>
                <div class="line-style" style="min-width: 48px">序号</div>
              </th>
              <th>
                <div class="line-style">域名</div>
              </th>
              <th v-if="tabActive == 1">
                <div class="line-style">失败原因</div>
              </th>
              <th v-if="tabActive == 0">
                <div class="line-style">操作</div>
              </th>
            </tr>
          </thead>
          <tbody>
            <tr
              class="lc-f"
              v-for="(item, index) in listShow"
              :key="item.domainName + index"
            >
              <td>
                <div class="line-style">
                  <span class="normal-f f-ell-sin" title="">{{
                    index + 1 + (page - 1) * pageSize
                  }}</span>
                </div>
              </td>
              <td>
                <div class="line-style">
                  <span class="normal-f f-ell-sin" :title="item.domainName">{{
                    item.domainName
                  }}</span>
                </div>
              </td>
              <td v-if="tabActive == 1">
                <div class="line-style">
                  <span class="c-o f-wrap" style="font-size: 12px">{{
                    item.status == 1
                      ? "域名不存在"
                      : item.status == 2
                      ? "域名已预订"
                      : ""
                  }}</span>
                </div>
              </td>
              <td v-if="tabActive == 0">
                <div class="line-style">
                  <span
                    class="strong-f f-ell-sin"
                    style="cursor: pointer"
                    @click="deleteItem(index)"
                    >删除</span
                  >
                </div>
              </td>
            </tr>
          </tbody>
        </table>
        <Empty-State
          style="background-color: #fff; padding: 20px"
          :noPadding="true"
          v-if="listNum != null && listNum == 0"
          :content="`没有${tabActive == 1 ? '不' : ''}可预订的域名！`"
        ></Empty-State>
        <div class="flx-row-e-c" style="margin-top: 10px">
          <Page
            :total="listNum"
            :current="page"
            :page-size="pageSize"
            @on-change="pageChange"
            show-elevator
            show-total
          />
        </div>
      </div>
      <div
        class="flx-row-c-c"
        style="margin-top: 30px"
        v-if="tabActive == 0 && listNum != null && listNum > 0"
      >
        <div
          class="big-button-size user-strong-button"
          style="margin-right: 50px"
          @click="submit"
        >
          确认预订
        </div>
        <div class="big-button-size user-normal-button" @click="cancel">
          取消
        </div>
      </div>
    </div>
  </Modal>
</template>

<script>
export default {
  components: {
    userTabList: () => import("_c/tabList/userTabList.vue"),
  },
  props: {
    show: {
      type: Boolean,
      default: false,
    },
    sucList: {
      default: () => [],
    },
    failList: {
      default: () => [],
    },
  },
  data() {
    return {
      loading: false,
      tablist: [
        {
          name: "可预订域名",
        },
        {
          name: "不可预订域名",
        },
      ],
      tabActive: 0,

      pageSize: 10,
      page: 1,
    };
  },
  watch: {
    show: {
      handler(newValue) {
        if (newValue) {
          this.page = 1;
          this.tabActive = 0;
          this.tablist[0].name = "可预订域名(" + this.sucList.length + ")";
          this.tablist[1].name = "不可预订域名(" + this.failList.length + ")";
        }
      },
    },
  },
  methods: {
    clickTab(index) {
      this.tabActive = index;
      this.$refs.scrollArea.scrollTop = 0;
      this.page = 1;
    },
    submit() {
      this.$emit("check-submit");
    },
    cancel() {
      this.config = false;
    },
    // 切换页码
    pageChange(page) {
      this.$refs.scrollArea.scrollTop = 0;
      this.page = page;
    },
    // 删除
    deleteItem(index) {
      this.$Modal.confirm({
        title: "删除确认",
        content: "<p>确定要删除此域名吗？</p>",
        onOk: async () => {
          this.tablist[0].name =
            "可预订域名(" + (this.sucList.length - 1) + ")";
          this.$emit("delete-item", index + (this.page - 1) * this.pageSize);
        },
      });
    },
  },
  computed: {
    config: {
      get() {
        return this.show;
      },
      set(val) {
        this.$emit("update:show", val);
      },
    },
    listShow() {
      if (this.tabActive == 0) {
        if (this.sucList.length < this.page * this.pageSize) {
          if (
            this.page > 1 &&
            this.sucList.length <= (this.page - 1) * this.pageSize
          )
            this.page = this.page - 1;
          return this.sucList.slice((this.page - 1) * this.pageSize);
        } else {
          return this.sucList.slice(
            (this.page - 1) * this.pageSize,
            (this.page - 1) * this.pageSize + this.pageSize
          );
        }
      } else {
        if (this.failList.length < this.page * this.pageSize) {
          return this.failList.slice((this.page - 1) * this.pageSize);
        } else {
          return this.failList.slice(
            (this.page - 1) * this.pageSize,
            (this.page - 1) * this.pageSize + this.pageSize
          );
        }
      }
    },
    listNum() {
      if (this.tabActive == 0) {
        return this.sucList.length;
      } else {
        return this.failList.length;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.main-area {
  padding: 15px 20px;
  max-height: 420px;
  overflow-y: auto;
}
</style>
